import BaseComponent from "components/Base/BaseComponent";
import React from "react";
import {Axis, Chart, Geom, Tooltip} from "bizcharts";
import SearchColumns from "./searchColumns";
import SearchBar from "components/Base/SearchBar/SearchBar";
import "./index.less";
import {connect} from "dva";
import PropTypes from "prop-types";

@connect(({qualityDataChart, hospital, qualityList}) => ({qualityDataChart, hospital, qualityList}))
export default class extends BaseComponent {

  static propTypes = {
    hospitalId: PropTypes.number,
  };

  getNamespace() {
    return 'qualityDataChart';
  }

  getSearchColumns = () =>{
    const searchColumns = SearchColumns(this);
    let columns = [];
    searchColumns.forEach((v) => {
      if (!(!!this.props.hospitalId && v.name == 'hospitalId'))
        columns.push(v);
    });

    return columns;
  }

  onSearch = (values, isReset) => {

    const {hospitalId} = this.props;
    let filters = values;
    if (!!hospitalId)
      filters = {...filters, hospitalId};

    this.dispatch({
      type: `${this.getNamespace()}/getData`,
      payload: {
        filters: filters, notice: this.showMsg
      },
    })
  }

  render() {

    const {data} = this.getModel(this.getNamespace());
    const {agv, variance, qualityChartDataTimeVos} = data;
    const ticks = [-variance*3, -variance*2, 0, variance*2, variance*3];

    console.log("data", data);

    const cols = {
      diff: {
        ticks: ticks,
        alias: '偏差'
      },
      time: {
        alias: '日期',
        range: [0, 1],
        type: 'timeCat',
        mask: 'YYYY-MM-DD HH:mm:ss',
      },
    };

    const line = {
      // stroke: '#ff0000',  // 线条颜色
      lineWidth: 3    // 线条粗细
    };

    const tickLine = {
      lineWidth: 1, // 刻度线宽
      // stroke: '#f00', // 刻度线的颜色
      length: 5, // 刻度线的长度, **原来的属性为 line**,可以通过将值设置为负数来改变其在轴上的方向
    };

    const label = {

      /**
       * 用于格式化坐标轴上显示的文本信息的回调函数
       * @param  {string} text  文本值
       * @param  {object} item  该文本值对应的原始数据记录
       * @param  {number} index 索引值
       * @return {string}       返回格式化后的文本值
       */
      formatter(text, item, index) {

        switch (index) {
          case 0:
            return '-3SD';
          case 1:
            return '-2SD';
          case 2:
            return '均数';
          case 3:
            return '2SD';
          case 4:
            return '3SD';
        }
      },

    }

    const grid = {
      type: 'line',
      hightLightZero: true,
      lineStyle: {
        lineWidth: 2, // 网格线的宽度复制代码
        lineDash: [4, 0] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
      }, // 网格线的样式配置，原有属性为 line
    };

    return (
      <div className="chart">
        <div className="search">
          <SearchBar columns={this.getSearchColumns(this)} onSearch={this.onSearch}/>
        </div>
        <Chart height={300} data={qualityChartDataTimeVos} scale={cols} forceFit>
          <Axis name="time" visible={false}/>
          <Axis name="diff" title line={line} tickLine={tickLine} label={label} grid={grid}/>
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom
            type="line"
            position="time*diff"
            size={2}/>
          <Geom
            type="point"
            position="time*diff"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}
